<template>
	<view class="candidate" :class="className" @click="handleClick">
		<view class="left">
			<image class="avatar" :src="data.avatar"></image>
			<view class="user">
				<view class="name">
					{{ data.name }}
				</view>
				<image mode="widthFix" v-if="data.driver_level_icon" :src="data.driver_level_icon"></image>
			</view>
		</view>
		<view class="button">
			<up-button :customStyle="customStyle" size="mini" :type="data.is_select == 1? 'primary':'info'"
				text="选TA"></up-button>
		</view>
	</view>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					司机信息
				</view>
				<view class="info">
					<view class="left">
						<image :src="data.avatar"></image>
						<view class="user">
							<view class="name">{{ data.name }}</view>
							<view class="plate">
								{{ data.car_plate }}
							</view>
						</view>
					</view>
					<view class="right">
						{{ data.driver_time }}年驾龄
					</view>
				</view>
				<view class="image">
					<image :src="data.car_img"></image>
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import order from '@/api/order.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
		className: {
			type: [String, Boolean],
			default: ''
		},
		id: {
			type: [String, Number],
			default: ''
		}
	})
	const customStyle = {
		height: '50rpx',
		borderRadius: '10rpx !important'
	}
	const show = ref(false)
	const handleClick = () => {
		show.value = true
	}
	const emits = defineEmits(['change'])
	const handleSumbit = async () => {
		const {
			status,
			info,
			data
		} = await order.userSelectDriver({
			id: props.id,
			driver_id: props.data.id
		})
		if (status == 1) {
			uni.requestPayment({
				timeStamp: data.timeStamp, //时间戳
				nonceStr: data.nonceStr, //随机字符串
				package: data.package, //prepay_id
				signType: data.signType, //签名算法MD5
				paySign: data.paySign, //签名
				success(res) {
					if (res.errMsg == "requestPayment:ok") {
						console.log('支付成功', res)
						show.value = false
						emits('change')
					} else {
						console.log('支付失败')
						utils.toast('支付失败')
					}
				},
				fail(res) {
					console.log('支付失败', res)
					utils.toast('支付失败')
				}
			})
		} else {
			utils.toast(info)
		}
	}
</script>

<style lang="scss" scoped>
	.candidate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6;
		padding-bottom: 34rpx;
		margin-bottom: 34rpx;

		.left {
			display: flex;
			align-items: center;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.user {
				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}

				image {
					width: 62rpx;
				}
			}
		}

		.button {
			width: 120rpx;
		}
	}

	.last-candidate {
		border: 0;
		margin: 0;
		padding: 0;
	}

	.popup-content {
		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.user {
					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #2C1F21;
						line-height: 42rpx;
					}

					.plate {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #A6A1A1;
						line-height: 42rpx;
					}
				}
			}

			.right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F88531;
				line-height: 42rpx;
			}
		}

		.image {
			width: 100%;
			height: 342rpx;
			margin-top: 34rpx;

			image {
				border-radius: 16rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>